<template>
    <div class="main-box">
        <!-- 搜索 -->
        <div class="search-box">
            <el-form :inline="true" :model="query" ref="query" class="demo-form-inline" size="small">
                <el-form-item label="搜索类型">
                    <el-input placeholder="请输入搜索内容" v-model="query.field_value" class="input-with-select">
                        <el-select v-model="query.field_type" slot="prepend" placeholder="请选择" style="width: 120px;">
                            <el-option label="管理名称" value="name"></el-option>
                            <el-option label="管理手机" value="mobile"></el-option>
                            <el-option label="菜单路由" value="menu_name"></el-option>
                            <el-option label="菜单路径" value="menu_name_path"></el-option>
                            <el-option label="响应描述" value="response_describe"></el-option>
                            <el-option label="地址" value="address"></el-option>
                            <el-option label="设备" value="device"></el-option>
                            <el-option label="IP" value="ip"></el-option>
                        </el-select>
                    </el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="searchRoleIds" multiple filterable clearable collapse-tags placeholder="请选择"
                        @change="selectRoleIds">
                        <el-option v-for="item in roleData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="响应">
                    <el-select v-model="searchResponseResult" multiple filterable clearable collapse-tags placeholder="请选择"
                        @change="selectResponseResult">
                        <el-option label="成功" value="1">
                        </el-option>
                        <el-option label="失败" value="2">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker v-model="query.date" type="daterange" align="right" value-format="yyyy-MM-dd"
                        unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="clickSearch">
                        <i class="el-icon-search"></i>
                    </el-button>
                    <el-button size="mini" @click="resetForm('query')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 按钮 -->
        <div class="btn-box">
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="del">删除</el-button>
        </div>
        <!-- 表格 -->
        <div class="table-list-box">
            <el-table ref="multipleTable" :data="listData" style="width: 100%;" border height="100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="40">
                </el-table-column>
                <el-table-column prop="admin_name" label="管理员">
                    <template slot-scope="{ row }">
                        <p>{{ row.admin_name }}（状态:{{ row.admin_status_attr }}）</p>
                        <p>手机:{{ row.mobile }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="菜单" width="240">
                    <template slot-scope="{ row }">
                        <el-tooltip class="item" effect="dark" :content="row.url" placement="left-start">
                            <p class="ellipsis">路由:{{ row.url }}</p>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" :content="row.menu_name_path" placement="left-start">
                            <p class="ellipsis">路径:{{ row.menu_name_path }}</p>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="method" label="请求">
                    <template slot-scope="{ row }">
                        <p>类型:{{ row.method }}</p>
                        <el-tooltip class="item" effect="dark" :content="row.param" placement="left-start">
                            <p class="ellipsis">参数：{{ row.param }}</p>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="IP">
                    <template slot-scope="{ row }">
                        <p>IP:{{ row.ip }}</p>
                        <p>地址:{{ row.address }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="设备">
                    <template slot-scope="{ row }">
                        <p>设备:{{ row.device }}</p>
                        <el-tooltip class="item" effect="dark" :content="row.user_agent" placement="left-start">
                            <p class="ellipsis">代理:{{ row.user_agent }}</p>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="响应">
                    <template slot-scope="{ row }">
                        <p>响应:{{ row.response_result_attr }}</p>
                        <el-tooltip class="item" effect="dark" :content="row.response_describe" placement="left-start">
                            <p class="ellipsis">描述：{{ row.response_describe }}</p>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="时间">
                    <template slot-scope="{ row }">
                        <p>开始:{{ row.create_time }}</p>
                        <p>结束:{{ row.end_time }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="异常">
                    <template slot-scope="{ row }">
                        <el-tooltip class="item" effect="dark" :content="row.abnormal" placement="left-start">
                            <p class="ellipsis">{{ row.abnormal }}</p>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page-box">
            <el-pagination @current-change="handleCurrentChange" :page-size="query.limit"
                layout="total, prev, pager, next, jumper" :total="listTotal" :current-page="query.page">
            </el-pagination>
        </div>
    </div>
</template>
  
<script>
import { list, del } from '@/api/system/auth/authAdminOperateLog';
import { getAll } from '@/api/system/auth/role';
export default {
    name: "list",
    data() {
        return {
            listData: [],
            roleData: [],
            listTotal: 0,
            query: {
                page: 1,
                limit: 10,
                field_type: 'name',
                field_value: '',
                role_ids: '',
                date: '',
                start_date: '',
                end_date: '',
                response_result: ''
            },
            selectIds: '',
            searchRoleIds: '',
            searchResponseResult: ''
        }
    },
    mounted() {
        this.getList();
        this.initRoleData();
    },
    methods: {
        initRoleData() {
            getAll().then(res => {
                this.roleData = res.data
            })
        },
        getList() {
            if (this.query.date.length > 0) {
                this.query.start_date = this.query.date[0];
                this.query.end_date = this.query.date[1];
            }
            list(this.query).then(res => {
                this.listTotal = res.data.count;
                this.listData = res.data.data
            })
        },
        resetForm(formName) {
            this.query.field_type = 'name';
            this.query.field_value = '';
            this.query.status = '';
            this.query.role_ids = '';
            this.searchRoleIds = '';
            this.searchResponseResult = '';
            this.query.response_result = '';
            this.query.date = '';
            this.query.start_date = '';
            this.query.end_date = '';
            this.query.page = 1;
            this.getList();
        },
        handleCurrentChange(page) {
            this.query.page = page;
            this.getList();
        },
        updateList() {
            this.getList();
        },
        selectRoleIds() {
            this.query.role_ids = this.searchRoleIds.join(',')
        },
        selectResponseResult() {
            this.query.response_result = this.searchResponseResult.join(',')
        },
        clickSearch() {
            this.getList();
        },
        del() {
            this.$confirm("<span style='color:red;'>删除无法找回, 是否继续?</span>", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                dangerouslyUseHTMLString: true,
                type: 'warning'
            }).then(() => {
                del({ 'ids': this.selectIds }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });

                    if (this.delIds != '') {
                        var maxCount = this.listTotal - this.delIds.split(',').length;
                        var maxPage = Math.ceil(maxCount / this.query.limit);
                        if (maxPage < this.query.page) {
                            this.query.page--;
                        }
                    }
                    this.getList();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        handleSelectionChange(val) {
            this.selectIds = val.map(item => item.id).toString();
        }
    }
}
</script>
  
<style lang="less" scoped>
.main-box {
    background-color: white;
    height: 100%;
    padding: 15px 30px;
    box-sizing: border-box;

    .table-list-box {
        margin-top: 15px;
        height: calc(100% - 140px);
        overflow: auto;

        .head-img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            text-align: center;
        }

        p {
            font-size: 12px;
        }
    }

    .page-box {
        margin-top: 15px;
        display: flex;
        justify-content: flex-end;
    }
}
</style>